<template>
  <div class="index" ref="appRef">
    <!-- 定部区域 -->
    <Header
      :style="{ visibility: $route.params.id ? 'hidden' : 'visible' }"
      v-if="!showDetailHeader"
    ></Header>
    <DetailHeader v-else />

    <div class="i-right">
      <div style="margin-right: 10px;display:flex;">
        <el-radio-group v-model="timeSel" size="mini" @change="(value) => {onChange(value)}">
          <el-radio-button label="day">近一日</el-radio-button>
          <el-radio-button label="week">近一周</el-radio-button>
          <el-radio-button label="month">近一月</el-radio-button>
          <el-radio-button label="custom">自定义</el-radio-button>
        </el-radio-group>
        <el-date-picker
        v-if="timeSel == 'custom'"
        v-model="pickTime"
        :default-time="['00:00:00', '23:59:59']"
        type="daterange"
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期"
        :picker-options="pickerOptions"
        @change="onChange(timeSel,pickTime)"
      />
      </div>
      <img
        src="@/assets/images/suoxiao@2x.png"
        alt
        @click="showDetailHeader = !showDetailHeader"
        v-if="!this.$route.query.inIframe"
      />
      <div></div>
    </div>
    <router-view ref="router_view"></router-view>
  </div>
</template>

<script>
import { debounce } from "../utils/debounce";
import Header from "@/components/index/Header.vue";
import DetailHeader from "@/components/index/detailHeader.vue";
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          console.log(new Date());
          return time.getTime() > Date.now() || time.getTime() < (Date.now() - 365 * 24 * 3600 * 1000);
        }
      },
      showDetailHeader: this.$route.query.inIframe ? true : false,
      timeSel: "month",
      pickTime:[]
    };
  },
  computed: {
    ...mapState(["dateSel"])
  },
  components: { Header, DetailHeader },
  mounted() {
    this.changeDateSel(this.timeSel);
  },
  methods: {
    ...mapMutations(["changeDate"]),
    onChange: debounce(function(value) {
      if(value!='custom'){
        this.pickTime=[]
      }
      this.changeDateSel(value,this.pickTime);
    }),
    changeDateSel(val,pickTime) {
      this.changeDate({date:val,pickTime:pickTime});
      let ref_child = this.$route.name;

      // this.$refs.router_view.$refs[ref_child].getList()
    }
  }
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  .i-right {
    position: absolute;

    display: flex;
    top: 1.25rem;
    right: 10px;
    img {
      width: 2.1875rem;
      height: 2.1875rem;
      margin: 0 10px;
    }
    section {
    }
  }
}
::v-deep {
  .el-radio-button__inner {
    border-radius: 0px !important;
  }
}
</style>
